<template>
  <div :style="nodeData.style" @mousedown="handleMouseDown" class="box">
    <div
      v-if="!nodeData.textEditStatus"
      class="textBox"
      @dblclick="() => changeStatus(true)"
    >
      <pre
        :style="{
          backgroundColor: nodeData.currentStyle.fill,
          border: nodeData.border ? '1px solid #000' : 'none',
          fontSize: nodeData.fontSize + 'px',
        }"
        id="pre"
        v-html="bePerText()"
      ></pre>
    </div>
    <div v-else style="width: 100%; height: 100%">
      <textarea
        ref="textarea"
        name=""
        id="textArea"
        @input="textareaInput"
        @keydown="textareaKeyDown"
        :value="nodeData.text"
      >
      </textarea>
    </div>
  </div>
</template>
<script>
/**
 * 文本节点 双击空白区域可添加
 */
import mixin from "./mixin";
export default {
  name: "TextNode",
  mixins: [mixin],
  data() {
    return {
      nodeData: {
        shape: "TextNode", //节点名称，不能重复,必须要跟组件名称一致，不然找不到组件导入
        //节点数据
        embeddingPadding: 20,
        text: " ",
        textEditStatus: true, //编辑状态
        // 普遍样式
        currentStyle: {
          fill: "none",
          stroke: "#000",
          strokeWidth: 1,
        },
        border: true,
        isDropEnd: false,
        // 其他样式
        fontSize: 16,
        style: {},
        keyCode: null,
        keyDownEnter: 1,
        createNodeDescribe: false,
      },
    };
  },
  mounted() {
    // this.node.setData({
    //   textEditStatus: false,
    // });
    this.$refs.textarea.focus();
  },
  methods: {
    changeStatus(status) {
      this.node.setData({
        textEditStatus: status,
      });
      this.$nextTick(() => {
        this.$refs.textarea && this.$refs.textarea.focus();
      });
    },
    textareaInput(e) {
      let value = e.target.value;
      let height = this.node.size().height;
      if (this.nodeData.keyCode !== 13) {
        if (value.length * 15 > 200) {
          this.node.size(
            200,
            (Math.ceil((value.length * 15) / 200) +
              this.nodeData.keyDownEnter -
              1) *
              35
          );
        } else {
          this.node.size(
            value.length * 15 + 15,
            35 * this.nodeData.keyDownEnter
          );
        }
      } else {
        this.nodeData.keyDownEnter++;
        this.node.size(this.node.size().width, this.node.size().height + 35);
        this.nodeData.keyCode = null;
      }
      if (height >= 150) {
        this.node.size(this.node.size().width, 150);
      }
      this.node.setData({
        text: value,
        textEditStatus: true,
      });
    },
    textareaKeyDown(e) {
      this.nodeData.keyCode = e.keyCode;
    },
    bePerText() {
      return this.nodeData.text.replace(/\n/g, "<br>");
    },
    // 不生成连接桩
    createPort() {},
  },
};
</script>
<style scoped lang="less">
.box {
  width: 100%;
  height: 100%;
  cursor: move;
  overflow: hidden;
  // font-weight: 700;
  padding: 2px;
  box-sizing: border-box;

  .textBox {
    width: 100%;
    #pre {
      width: 100%;
      white-space: pre-wrap;
      word-wrap: break-word;
      text-indent: 0 !important ;
      margin: 0 !important ;
      font-family: "Chinese Quote", -apple-system, BlinkMacSystemFont,
        "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei",
        "Helvetica Neue", Helvetica, Arial, sans-serif, "Apple Color Emoji",
        "Segoe UI Emoji", "Segoe UI Symbol";
    }
  }
  #textArea {
    width: 100%;
    height: 100%;
    font-size: 16px;
  }
}
</style>
